<template>
  <div style="display: flex;line-height: 60px;align-items: center;">
    <div style="margin-top: 4px" @click="toggleSidebar">
      <i :class="{'el-icon-s-fold': isSidebarVisible, 'el-icon-s-unfold': !isSidebarVisible}" style="font-size: 20px;color: #ffffff"></i>
    </div>
    <div style="flex: 1;text-align: center;font-size: 34px">
      <span class="headline">图书管理系统</span>
    </div>
    <el-avatar :size="30" icon="el-icon-user-solid" style="margin-right: 8px"></el-avatar>
  <el-dropdown>
    <span class="username">{{username}}</span>
    <i class="el-icon-arrow-down" style="margin-left: 5px;"></i>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item @click.native="confirmLogout">退出登录</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
  </div>
</template>

<script>
export default {
  name: "Header",

  data() {
    return {
      isSidebarVisible: true // 默认侧边栏是可见的
    };
  },

  computed:{
    username(){
      return sessionStorage.getItem("username")
    }
  },

  methods:{
    toggleSidebar() {
      this.isSidebarVisible = !this.isSidebarVisible;
      this.$emit('toggle-sidebar', this.isSidebarVisible); // 通知父组件切换侧边栏状态
    },

    confirmLogout() {
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout();
      }).catch(() => {
      });
    },

    logout(){
      window.localStorage.clear()
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
  }

}
</script>

<style scoped>
.el-icon-arrow-down {
  color: #ffffff;
}
.username {
  color: #ffffff;
}
.headline {
  color: #ffffff;
}
</style>